<template>
	<view class="page_cont">
		<view class='top_wrap'>
			<view class="add_wrap" @click='nav_job_detail(-1)'>
				<view class='title'>发布职位</view>
				<image class='icon' src="/static/icon47.png"></image>
			</view>
			<!-- <view class='nav_wrap'>
				<view class='item_wrap' v-for="(item,index) in navBars" :key='index' @click="check_nav(index)">
					<view class='item'>
						<view class="text" :class="current==index?'active':''">{{item}}</view>
						<view class="line" :style="{background:current==index?'#5B90FF':'rgba(0,0,0,0)'}"></view>
					</view>
				</view>
			</view> -->
		</view>
		<view class='item_cont'>
			<view class='job_item' v-for='(item,index) in jobs' :key='item.id' @click='nav_job_detail(item.id)'>
				<!-- <image class='icon_prior' src="/static/icon69.png"></image> -->
				<view class='job_title'>
					<view class='job_name'>{{item.name}}</view>
					<view class='job_wages'>{{item.salary}}
					<text class='text1' v-if="item.salary!='面议'"><text class='text2'>元/</text>月</text></view>
				</view>
				<view class='job_dem'>{{item.workAddressCity}}-{{item.workAddressRegion}}<text class='text3'>{{item.minimumEducationName}}</text>{{item.workExperienceName}}</view>
				<view class='job_label_box'>
					<scroll-view class='scroll_label' scroll-with-animation="true" scroll-x="true">
						<view class='label' v-for="(item,index) in item.fringeBenefits" :key="index">{{item}}</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from "../../utils/util.js"
	import {get_job_list} from "../../api/home.js"
	export default{
		data(){
			return{
				navBars: ['招聘中','已关闭','未发布'],
				current: 0,
				animationData: {},
				queryList:{
					businessId:'',
					currentPage:1,
					pageSize:10,
					sidx:"tp.create_time",
					order:"desc",
				},
				jobs: [],
				total:0,
			}
		},
		onLoad(options) {
			const business = uni.getStorageSync('userIdentity')
			this.queryList.businessId = business.businessId
		},
		onShow(){
			this.queryList.currentPage = 1
			this.jobs=[]
			this.getList()
		},
		onReachBottom(){
			if(this.jobs.length<this.total){
				this.queryList.currentPage++
				this.getList()
			}else{
				util.page_show_toast('没有更多了',1500)
			}
		},
		methods:{
			// 发布职位
			publish_job(id){
				uni.navigateTo({
					url: '../publishJob/publishJob?id='+id+'&businessId='+this.queryList.businessId+'&status=2'
				})
			},
			// 查看职位
			nav_job_detail(id){
				// if(this.current==0){
				// 	uni.navigateTo({
				// 		url: '/pages/jobDetail/jobDetail?id='+id+"&status=7"
				// 	})
				// }else{
				// 	uni.navigateTo({
				// 		url: '../publishJob/publishJob?id='+id+'&businessId='+this.queryList.businessId+'&status='+this.current
				// 	})
				// }
				uni.navigateTo({
					url: '../publishJob/publishJob?id='+id+'&businessId='+this.queryList.businessId
				})
			},
			// 切换
			check_nav(index){
				this.current=index;
				this.queryList.currentPage = 1
				this.jobs=[]
				this.getList()
			},
			getList(){
				uni.showLoading({})
				get_job_list(this.queryList).then(res=>{
					uni.hideLoading()
					const {records,total} = res.data.data
					this.total = total
					records.forEach(i=>{
						i.fringeBenefits=i.fringeBenefits.split(',')
						// i.salary = {{item.salaryMin}}-{{item.salaryMax}}
						i.salary = i.salaryMin===0?"面议":`${i.salaryMin}-${i.salaryMax}`
					})
					this.jobs.push(...records)
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #F6F7F9;
		.page_cont{
			width: 100%;
			.top_wrap{
				position: fixed;
				/* #ifdef MP-WEIXIN */
				top: 0;
				/* #endif */
				/* #ifdef H5 */
				top: 44px;
				/* #endif */
				left: 0;
				width: 100%;
				box-sizing: border-box;
				background: #fff;
				padding: 20rpx 32rpx 0 32rpx;
				z-index: 200;
				.add_wrap{
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-bottom: 36rpx;
					.title{
						flex: 1;
						height: 42rpx;
						font-size: 30rpx;
						font-weight: 600;
						line-height: 42rpx;
						color: #3F4A58;
					}
					.icon{
						width: 50rpx;
						height: 50rpx;
					}
				}
				.nav_wrap{
					padding: 0 8rpx;
					display: flex;
					flex-direction: row;
					margin-top: 52rpx;
					.item_wrap{
						flex: 1;
						text-align: center;
						&:first-child{
							text-align: left;
						}
						&:last-child{
							text-align: right;
						}
						.item{
							display: inline-block;
							width: 108rpx;
							.text{
								width: 108rpx;
								height: 50rpx;
								font-size: 36rpx;
								line-height: 50rpx;
								font-weight: 400;
								color: #929BA7;
								margin-bottom: 4rpx;
							}
							.active{
								font-weight: 600;
								color: #5B90FF;
							}
							.line{
								width: 52rpx;
								margin: 0 auto;
								height: 8rpx;
								border-radius: 2rpx;
							}
						}
					}
				}
			}
			.item_cont{
				padding-top: 116rpx;
				// padding-top: 188rpx;
				.job_item{
					background: #fff;
					margin-bottom: 10rpx;
					padding: 32rpx 40rpx;
					position: relative;
					.icon_prior{
						position: absolute;
						top: 0;
						left: 0;
						width: 60rpx;
						height: 62rpx;
					}
					.job_title{
						display: flex;
						flex-direction: row;
						align-items: center;
						.job_name{
							flex: 1;
							height: 50rpx;
							font-size: 36rpx;
							font-weight: 600;
							line-height: 50rpx;
							color:rgba(63,74,88,1);
							overflow: hidden;
						}
						.job_wages{
							height: 50rpx;
							font-size: 36rpx;
							font-weight: 500;
							line-height: 50rpx;
							color:rgba(91,144,255,1);
							.text1{
								font-size: 30rpx;
								font-weight:500;
								.text2{
									margin: 0 4rpx 0 2rpx;
								}
							}
						}
					}
					.job_dem{
						margin: 16rpx 0 12rpx 0;
						text-align: left;
						height: 40rpx;
						font-size: 28rpx;
						font-weight: 400;
						line-height: 40rpx;
						color:rgba(63,74,88,1);
						.text3{
							margin: 0 24rpx;
						}
					}
					.job_label_box{
						width: 100%;
						overflow: hidden;
						white-space: nowrap;
						height: 48rpx;
						.scroll_label{
							width: 100%;
							height: 60rpx;
							line-height: 40rpx;
							overflow: hidden;
							.label{
								display: inline-block;
								background: #F6F7F9;
								height: 48rpx;
								line-height: 48rpx;
								padding: 0 16rpx;
								font-size: 24rpx;
								font-weight: 400;
								color:rgba(146,155,167,1);
								border-radius: 8rpx;
								margin-right: 16rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
